:root {
  --bttv-brand-color: #d50014;
}

.bttv-tooltip-wrapper {
  display: inline-block;
  position: relative;

  &:hover .bttv-tooltip {
    display: block;
  }
}

.bttv-tooltip {
  padding: 3px 6px;
  border-radius: 0.4rem;
  background-color: var(--color-background-tooltip);
  color: var(--color-text-tooltip);
  display: none;
  position: absolute;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  z-index: 2000;
  pointer-events: none;
  user-select: none;
  white-space: pre;
  margin-bottom: 6px;

  &.bttv-tooltip--up {
    top: auto;
    bottom: 100%;
    left: 0;
    margin-bottom: 6px;

    &.bttv-tooltip--align-center {
      left: 50%;
      transform: translateX(-50%);

      &:after {
        left: 50%;
        margin-left: -3px;
      }
    }

    &.bttv-tooltip--align-right {
      left: 100%;
      transform: translateX(-100%);

      &:after {
        left: 100%;
        margin-left: -16px;
      }
    }

    &:after {
      border-radius: 0 0 2px;
      top: 100%;
      left: 6px;
      margin-top: -3px;
    }
  }

  &:before {
    top: -6px;
    left: -6px;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    z-index: -1;
  }

  &:after {
    background-color: var(--color-background-tooltip);
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    z-index: -1;
  }

  &:after,
  &:before {
    position: absolute;
    content: '';
  }
}
